<div id="{$form.name}">
<div class="form-group"><label class="col-sm-2 control-label">{$form.title}</label>
    <div class="col-sm-10">
    	<select v-model="selected" @change="bind" class="js-select2 form-control" id="{$form.name}" name="{$form.name}" data-placeholder="请选择一项">
    	<option value="">=请选择=</option>
    	{volist name="form.options" id="option"}
	    <option value="{$option}" {if condition="$form.value==$option"}selected="true"{/if}>{$key}</option> 
	    {/volist}
	    </select>
	    {notempty name="form.tips"}
        <div class="help-block">{$form.tips}</div>
        {/notempty}
    </div>
</div> 

<div class="form-group"><label class="col-sm-2 control-label">栏目首页模板</label>
    <div class="col-sm-10">
        <select v-model="category_template" class="js-select2 form-control" name="category_template">
            <option value="">=请选择=</option>
            <option @value="{{item.template}}" v-for="item in categorys">{{item.template}}</option>
        </select>
    </div>
</div> 

<div class="form-group"><label class="col-sm-2 control-label">栏目列表页模板</label>
    <div class="col-sm-10">
        <select v-model="list_template" class="js-select2 form-control" name="list_template" data-placeholder="请选择一项">
            <option value="">=请选择=</option>
            <option @value="{{item.template}}" v-for="item in lists">{{item.template}}</option>
        </select> 
    </div>
</div> 

<div class="form-group"><label class="col-sm-2 control-label">内容页模板</label>
    <div class="col-sm-10">
        <select v-model="show_template" class="js-select2 form-control" name="show_template" data-placeholder="请选择一项">
            <option value="">=请选择=</option>
            <option @value="{{item.template}}" v-for="item in shows">{{item.template}}</option>
        </select> 
    </div>
</div> 
</div>
<script type="text/javascript"> 
    var {$form.name} = new Vue({
        el: '#{$form.name}',
        data: {
            selected: '{$form.value|default=''}',
            categorys:'',
            lists:'',//列表页模板
            shows:'',//详细页模板
            category_template:"{$form.category_template|default=''}",
            list_template:'{$form.list_template|default=''}',
            show_template:'{$form.show_template|default=''}'
        },
        methods: {
            bind: function (c,l,s) {
                var _self = this;
                var data={};
                data.theme=_self.selected;
                app.post('home_theme_templates',data,'',function(sender){
                    if(typeof(c)!="undefined"){
                        _self.category_template=c;
                    }
                    if(typeof(l)!="undefined"){
                        _self.list_template=l;
                    }
                    if(typeof(s)!="undefined"){
                        _self.show_template=s;
                    }
                    _self.categorys =sender.categorys;
                    _self.lists     =sender.lists;
                    _self.shows     =sender.shows;
                });  
            }
        },
        mounted:function(){
            this.bind();
        }
    })
</script>